<template>
	<view class="container">
		<view class="userInfo1" v-if="token" @tap='loginOut'>
			<view class="imgbox" :class="{vipimg:userInfo.vip}">
				<image :src="userInfo.avatarUrl"></image>
				<image v-if="userInfo.vip" src="../../static/image/mine/VIPIcon.png" class="vipIcon"></image>
			</view>
			<view class="box">
				<text :class="{vip:userInfo.vip}">{{userInfo.nickName}}</text>
				<image src="../../static/image/mine/arrow-right.png"></image>
			</view>
		</view>
		<view class="userInfo" @tap='goLogin' v-else>
			<image src="../../static/image/mine/zu428.png"></image>

			<view class="box">
				<view>
					<view>
						<text class="title">立即登录</text>
					</view>
					<text>登录后可收藏喜欢的菜谱</text>
				</view>

				<image src="../../static/image/mine/arrow-right.png"></image>
			</view>

		</view>
		<view>
			<view class="imageVip" v-if="userInfo.vip">
				<text>欢迎您! 尊贵的钻石vip会员 </text> <br />
				<text>会员到期时间：{{userInfo.vipdate}}</text>
			</view>
			<navigator url="/pages/getVip/getVip" v-else>
				<view class="imageVip">
					<text>升级为vip</text>
				</view>
			</navigator>

		</view>
		<view>
			<view class="item3" v-if="userInfo.vip">
				<view class="item">
					<image src="../../static/image/mine/gold1.png"></image>
					<text>我的收藏</text>
				</view>
				<view class="item">
					<navigator class="item" :url="'../history/history?data='+userInfo._id">
						<image src="../../static/image/mine/gold2.png"></image>
						<text>浏览记录</text>
					</navigator>

				</view>
				<view class="item">
					<image src="../../static/image/mine/gold3.png"></image>
					<text> 点赞 </text>
				</view>
			</view>

			<view class="item3" v-else>
				<view class="item">
					<image src="../../static/image/index/like/mengbanzu279(1).png"></image>
					<text>我的收藏</text>
				</view>
				<view class="item">
					<navigator class="item" :url="'../history/history?data='+userInfo._id">
						<image src="../../static/image/mine/mengbanzu281.png"></image>
						<text>浏览记录</text>
					</navigator>

				</view>
				<view class="item">
					<image src="../../static/image/mine/mengbanzu272.png"></image>
					<text> 点赞 </text>
				</view>
			</view>


		</view>
		<u-gap height="20" bg-color="#f6f7f8"></u-gap>
		<view class="ingredient">
			<!-- 详细原料 -->
			<mineIngredient :ingredientList='userInfo.mycollect' />
		</view>
		<u-gap height="20" bg-color="#f6f7f8"></u-gap>
		<!-- 带图的菜谱 -->
		<mineImageIngredient :ingredientList='userInfo.mycollect' />
		<u-gap height="20" bg-color="#f6f7f8"></u-gap>

		<view class="contentBottom">
			<image src="../../static/image/mine/mengbanzu272.png"></image>
			<view class="box">
				<view>
					<text>去App Store给菜谱大全评分</text>
				</view>

				<image src="../../static/image/mine/arrow-right.png"></image>
			</view>
		</view>
		<view class="contentBottom">
			<image src="../../static/image/mine/mengbanzu273.png"></image>
			<view class="box">
				<view>
					<text>反馈问题</text>
				</view>

				<image src="../../static/image/mine/arrow-right.png"></image>
			</view>
		</view>
		<u-gap height="20" bg-color="#f6f7f8"></u-gap>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<!-- 导航栏 -->
		<tabbar />
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				token: null,
				scrollTop: 0,

			}
		},
		onLoad() {
			this.getLogin()
		},
		onShow() {
			this.getLogin();
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			...mapActions(['getUserInfo1']),
			getLogin() {
				wx.getStorage({
					key: 'token'
				}).then(res => {
					// console.log(res.data);
					// this.getUserInfo(res.data);
					this.token = res.data
					this.getUserInfo1(res.data)
				}).catch(reason => {
					this.token = null
					console.log(reason)
				})
			},
			goLogin() {
				uni.navigateTo({
					url: '../login/index'
				})
			},
			loginOut() {
				uni.showModal({
					content: '是否要退出登录',
					success: (res) => {
						if (res.confirm) {
							// console.log(this.userInfo);
							this.$store.state.userInfo.vip = false;
							this.$store.state.userInfo.mycollect = [];

							uni.removeStorageSync('token')
							uni.showToast({
								title: "退出登录成功",
								icon: 'none'
							})
							uni.reLaunch({
								url: "/pages/mine/mine"
							})
						}
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.container {
		>view {
			padding: 22rpx 32rpx;
		}

		.userInfo {
			display: flex;

			image {
				width: 116rpx;
				height: 116rpx;
				border-radius: 50%;
			}

			.box {
				width: 550rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					margin-left: 20rpx;
					font-size: 24rpx;
					color: #afafaf;
				}

				.title {
					font-size: 30rpx;
					font-weight: bold;
					color: #515151;
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.userInfo1 {
			display: flex;

			.box {
				width: 550rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					margin-left: 20rpx;
				}

				image {

					width: 40rpx;
					height: 40rpx;
				}



				.vip {
					color: #b4853f;
				}
			}


			.imgbox {
				width: 126rpx;
				height: 126rpx;
				border-radius: 50%;
				position: relative;

				&.vipimg {
					border: 5rpx solid #b4853f;
				}

				image {
					width: 116rpx;
					height: 116rpx;
					border-radius: 50%;
				}

				.vipIcon {
					position: absolute;
					width: 60rpx;
					height: 60rpx;
					right: -15rpx;
					top: -15rpx;
				}
			}



		}

		.imageVip {
			width: 688rpx;
			height: 118rpx;
			background: url(../../static/image/mine/mengbanzu87.png) no-repeat;
			background-size: cover;
			padding: 20rpx 102rpx;
			font-size: 26rpx;
			color: #b4853f;
			font-weight: bold;
			text-align: center;
		}

		.item3 {
			height: 122rpx;
			border-radius: 8rpx;
			align-items: center;
			display: flex;
			// justify-content: space-around;

			.item {
				flex: 1;
				display: flex;
				align-items: center;
				flex-direction: column;

				image {
					width: 44rpx;
					height: 44rpx;
				}

				text {
					font-size: 28rpx;
				}
			}
		}

		.ingredient {
			padding-top: 0;
		}

		.contentBottom {
			display: flex;
			align-items: center;

			image {
				width: 44rpx;
				height: 44rpx;
				margin-right: 20rpx;
			}

			.box {
				width: 616rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #dadada;
				line-height: 70rpx;

				text {
					margin-left: 20rpx;
					font-size: 28rpx;
					color: #515151;
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>
